<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>CSS3: An Introduction</title>
<!-- metadata -->
<meta name="generator" content="S5" />
<meta name="version" content="S5 1.1" />
<meta name="presdate" content="" />
<meta name="author" content="Kai Feng Zhang" />
<meta name="company" content="IBM CDL" />
<!-- configuration parameters -->
<meta name="defaultView" content="slideshow" />
<meta name="controlVis" content="hidden" />
<!-- style sheet links -->
<link rel="stylesheet" href="ui/default/slides.css" type="text/css" media="projection" id="slideProj" />
<link rel="stylesheet" href="ui/default/outline.css" type="text/css" media="screen" id="outlineStyle" />
<link rel="stylesheet" href="ui/default/print.css" type="text/css" media="print" id="slidePrint" />
<link rel="stylesheet" href="ui/default/opera.css" type="text/css" media="projection" id="operaFix" />
<!-- embedded styles -->
<style type="text/css" media="all">
.imgcon {width: 525px; margin: 0 auto; padding: 0; text-align: center;}
#anim {width: 270px; height: 320px; position: relative; margin-top: 0.5em;}
#anim img {position: absolute; top: 42px; left: 24px;}
img#me01 {top: 0; left: 0;}
img#me02 {left: 23px;}
img#me04 {top: 44px;}
img#me05 {top: 43px;left: 36px;}
</style>
<!-- S5 JS -->
<script src="ui/default/slides.js" type="text/javascript"></script>
</head>
<body>

<div class="layout">
<div id="controls"><!-- DO NOT EDIT --></div>
<div id="currentSlide"><!-- DO NOT EDIT --></div>
<div id="header"></div>
<div id="footer">
<h1>CSS3 Introduction</h1>
<h2>Kai Feng Zhang &#8226; Today's date</h2>
</div>
</div>

<ol class="xoxo presentation">

<li class="slide">
<h1>CSS3 Introduction</h1>
<h3>Kai Feng Zhang/China/IBM</h3>
<h4>IBM Project Vulcan</h4>
<div class="handout"></div>
</li>


<li class="slide">
<h1>Agenda</h1>
<ul>
<li>CSS History</li>
<li>CSS2.1 vs. CSS3</li>
<li>Changes in CSS3</li>
<li>Browser Support Matrix</li>
<li>Tools & References</li>
</ul>
</li>

<li class="slide">
<h1>Modules</h1>
<ul>
<li>Why</li>
<li>What</li>
<li>Impact</li>
</ul>
</li>

<li class="slide">
<h1>New selectors</h1>
<ul>
<li>first-child</li>
<li>last-child</li>
<li>pseude class</li>
</ul>
</li>

<li class="slide">
<h1>Child selector: ></h1>
<div>
<div class="code-sample">
<pre>
#childSelector > p {
  color: red;
}
</pre>
</div>
<div class="code-result">
<div id="childSelector">
  <p>This is targetd.</p>
  <ul>
    <li>This is not targeted.</li>
  </ul>
  <p>This is targetd.</p>
</div>
</div>
<div class="dom-sample">
<pre>
&lt;div id="childSelector"&gt;
  &lt;p&gt;This is targetd.&lt;/p&gt;
  &lt;ul&gt;
    &lt;li&gt;This is not targeted.&lt;/li&gt;
  &lt;/ul&gt;
  &lt;p&gt;This is targetd.&lt;/p&gt;
&lt;/div&gt;
</pre>
</div>
<div class="comments">
Here goes some comments if need.
</div>
</div>
</li>

<li class="slide">
<h1>Adjacent Sibling Selector: +</h1>
<div class="adjacent-sibing">
<div class="code-sample">
<pre>
blockquote + p {
  color: red;
}
</pre>
</div>
<div class="code-result">
<p>This is not targeted.</p>
<blockquote>
	<p>This is not targeted.</p>
</blockquote>
<p>This is targeted.</p>
<p>This is not targeted.</p>
</div>
<div class="dom-sample">
<pre>
&lt;p&gt;This is not targeted.&lt;/p&gt;
&lt;blockquote&gt;
  &lt;p&gt;This is not targeted.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;This is targeted.&lt;/p&gt;
&lt;p&gt;This is not targeted.&lt;/p&gt;
</pre>
</div>
<div class="comments">
Here goes some comments if need.
</div>
</div>
</li>



<li class="slide">
<h1>General Sibling Selector: ~</h1>
<div class="general-sibling">
<div class="code-sample">
<pre>
blockquote ~ p {
  color: red;
}
</pre>
</div>
<div class="code-result">
<p>This is not targeted.</p>
<blockquote>
	<p>This is not targeted.</p>
</blockquote>
<p>This is targeted.</p>
<p>This is targeted.</p>
</div>
<div class="dom-sample">
<pre>
&lt;p&gt;This is not targeted.&lt;/p&gt;
&lt;blockquote&gt;
  &lt;p&gt;This is not targeted.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;This is targeted.&lt;/p&gt;
&lt;p&gt;This is targeted.&lt;/p&gt;
</pre>
</div>
<div class="comments">
Here goes some comments if need.
</div>
</div>
</li>

<li class="slide">
<h1>Attribute Selector</h1>
<div class="attribute-selector">
<div class="code-sample">
<pre>
input[type=text] {
  border-color: red;
}
</pre>
</div>
<div class="code-result">
<p><input type="password" name="one"></p>
<p><input type="text" name="two"></p>
</div>
<div class="dom-sample">
<pre>
&lt;input type="password" name="one"&gt;
&lt;input type="text" name="two"&gt;
</pre>
</div>
<div class="comments">
Here goes some comments if need.
</div>
</div>
</li>


<li class="slide">
<h1>First Child Pseudo-class :first-child</h1>
<div class="first-child">
<div class="code-sample">
<pre>
ul li:first-child {
  color: red;
}
</pre>
</div>
<div class="code-result">
<ul>
<li>This is targeted.</li>
<li>This is not targeted.</li>
<li>This is not targeted.</li>
<li>This is not targeted.</li>
</ul>
</div>
<div class="dom-sample">
<pre>
&lt;ul&gt;
  &lt;li&gt;This is targeted.&lt;/li&gt;
  &lt;li&gt;This is not targeted.&lt;/li&gt;
  &lt;li&gt;This is not targeted.&lt;/li&gt;
  &lt;li&gt;This is not targeted.&lt;/li&gt;
&lt;/ul&gt;
</pre>
</div>
<div class="comments">
Here goes some comments if need.
</div>
</div>
</li>


<li class="slide">
<h1>First Child Pseudo-class :last-child</h1>
<div class="last-child">
<div class="code-sample">
<pre>
ul li:last-child {
  color: red;
}
</pre>
</div>
<div class="code-result">
<ul>
<li>This is not targeted.</li>
<li>This is not targeted.</li>
<li>This is not targeted.</li>
<li>This is targeted.</li>
</ul>
</div>
<div class="dom-sample">
<pre>
&lt;ul&gt;
  &lt;li&gt;This is not targeted.&lt;/li&gt;
  &lt;li&gt;This is not targeted.&lt;/li&gt;
  &lt;li&gt;This is not targeted.&lt;/li&gt;
  &lt;li&gt;This is targeted.&lt;/li&gt;
&lt;/ul&gt;
</pre>
</div>
<div class="comments">
Here goes some comments if need.
</div>
</div>
</li>


<li class="slide">
<h1>First Letter Pseudo-element :first-letter</h1>
<div class="first-letter">
<div class="code-sample">
<pre>
p:first-letter {
  color: red;
  font-size: 2em;
}
</pre>
</div>
<div class="code-result">
<p>The first letter in the paragraph is targeted.</p>
</div>
<div class="dom-sample">
<pre>
&lt;p&gt;The first letter in the paragraph is targeted.&lt;/p&gt;
</pre>
</div>
<div class="comments">
Here goes some comments if need.
</div>
</div>
</li>

<li class="slide">
<h1>First Line Pseudo-element :first-line</h1>
<div class="first-line">
<div class="code-sample">
<pre>
p:first-line {
  color: red;
}
</pre>
</div>
<div class="code-result">
<p>The first line in the paragraph is targeted. The first line in the paragraph is targeted. The first line in the paragraph is targeted.</p>
</div>
<div class="dom-sample">
<pre>
&lt;p&gt;The first line in the paragraph is targeted. The first line in the paragraph is targeted. The first line in the paragraph is targeted.&lt;/p&gt;
</pre>
</div>
<div class="comments">
Here goes some comments if need.
</div>
</div>
</li>

<li class="slide">
<h1>Pseudo-class :enabled, :disabled, :checked</h1>
<div class="rest-pseudo">
<div class="code-sample">
<pre>
:enabled {
  border-color: green;
}
:disabled{
  border-color: red;
}
:checked {
  margin-left: 50px
}
</pre>
</div>
<div class="code-result">
<p><input type="text" value="This input is enabled"></p>
<p><input type="text" disabled="disabled" value="This input is disabled"></p>
<p><input type="checkbox" checked="checked"><label>This checkbox is checked</label></p>
</div>
<div class="dom-sample">
<pre>
&lt;input type="text" value="This input is enabled"&gt;
&lt;input type="text" disabled="disabled" value="This input is disabled"&gt;
&lt;input type="checkbox" checked="checked"&gt;&lt;label&gt;This checkbox is checked&lt;/label&gt;
</pre>
</div>
<div class="comments">
Here goes some comments if need.
</div>
</div>
</li>


<li class="slide">
<h1>nth of Type Pseudo-class :nth-of-type()</h1>
<div class="nth-of-type">
<div class="code-sample">
<pre>
tbody tr:nth-of-type(2n+1) td {
  background-color: gray;
}
</pre>
</div>
<div class="code-result">
<table>
  <thead>
    <tr>
      <td>Name</td>
      <td>Age</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tom</td>
      <td>12</td>
    </tr>
    <tr>
      <td>Kitty</td>
      <td>8</td>
    </tr>
    <tr>
      <td>Jerry</td>
      <td>9</td>
    </tr>
    <tr>
      <td>Kate</td>
      <td>10</td>
    </tr>
  </tbody>
</table>
</div>
<div class="dom-sample">
<pre>
&lt;table&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;td&gt;Name&lt;/td&gt;&lt;td&gt;Age&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td&gt;Tom&lt;/td&gt;&lt;td&gt;12&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Kitty&lt;/td&gt;&lt;td&gt;8&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Jerry&lt;/td&gt;&lt;td&gt;9&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Kate&lt;/td&gt;&lt;td&gt;10&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;
</pre>
</div>
<div class="comments">
Here goes some comments if need.
</div>
</div>
</li>


<li class="slide">
<h1>Achieve design trend</h1>
<ul>
<li>border-radius</li>
<li>border-image</li>
<li>box-shadow</li>
<li>text-shadow</li>
<li>multiple background images</li>
<li>opacity</li>
<li>RGBa</li>
<li>Web fonts</li>
</ul>
</li>

<li class="slide">
<h1>Border Radius</h1>
<div>
<div class="code-sample">
<pre>
p {
  border: 3px solid red;
  padding: 1em;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}
</pre>
</div>
<div class="code-result">
<p class="border-radius">
This is just a sample text block.This is just a sample text block.
</p>
</div>
<div class="comments">
Here goes some comments if need.
</div>
</div>
</li>

<li class="slide">
<h1>Border Image</h1>
<div>
<div class="code-sample">
<pre>
p {

}
</pre>
</div>
<div class="code-result">
<p class="border-image">
This is just a sample text block.This is just a sample text block.
</p>
</div>
<div class="comments">
Here goes some comments if need.
</div>
</div>
</li>

<li class="slide">
<h1>Box Shadow</h1>
<div>
<div class="code-sample">
<pre>
p {
  background-color: black;
  padding: 1em;
  -moz-box-shadow: 3px 5px 15px grey;
  -webkit-box-shadow: 3px 5px 15px grey;
}
</pre>
</div>
<div class="code-result">
<p class="box-shadow">
This is just a sample text block.This is just a sample text block.
</p>
</div>
<div class="comments">
Here goes some comments if need.
</div>
</div>
</li>

<li class="slide">
<h1>Text Shadow</h1>
<div>
<div class="code-sample">
<pre>
p {
  padding: 1em;
  color: white;
  text-shadow: 2px 2px 6px black;
}
</pre>
</div>
<div class="code-result">
<p class="text-shadow">
This is just a sample text block.This is just a sample text block.
</p>
</div>
<div class="comments">
Here goes some comments if need.
</div>
</div>
</li>

<li class="slide">
<h1>Multiple Background Images</h1>
<div>
<div class="code-sample">
<pre>
p{
  padding: 0.1em;	
  border: 1 solid black;
  background-repeat: no-repeat;
  background-position: top left, bottom right;
  background-image: url(back1.png), url(back2.png);
}
</pre>
</div>
<div class="code-result">
<p class="multiple">
This is just a sample text block.This is just a sample text block.
</p>
</div>
<div class="comments">
Here goes some comments if need.
</div>
</div>
</li>

<li class="slide">
<h1>Opacity</h1>
<div>
<div class="code-sample">
<pre>
p{
  background-color: black;
  color: white;
  opacity: .1;
  padding: 1em;
}
</pre>
</div>
<div class="code-result">
<p class="opacity">
This is just a sample text block.This is just a sample text block.
</p>
</div>
<div class="comments">
Here goes some comments if need.
</div>
</div>
</li>

<li class="slide">
<h1>RGBa</h1>
<div>
<div class="code-sample">
<pre>
p{
  background-color: rgba(0 , 0 , 0, .5);
  padding: 1em;
}
</pre>
</div>
<div class="code-result">
<p class="rgba">
This is just a sample text block.This is just a sample text block.
</p>
</div>
<div class="comments">
Here goes some comments if need.
</div>
</div>
</li>

<li class="slide">
<h1>Web Fonts</h1>
<div>
<div class="code-sample">
<pre>
p{

}
</pre>
</div>
<div class="code-result">
<p class="web-fonts">
This is just a sample text block.This is just a sample text block.
</p>
</div>
<div class="comments">
Here goes some comments if need.
</div>
</div>
</li>

<li class="slide">
<h1>Operatic Origins</h1>
<ul>
<li>Opera 4 introduced <a href="http://www.opera.com/support/tutorials/operashow/" rel="external">Opera Show</a>, a projection-mode style sheet technology (link demonstrates external link styling and window spawning)</li>
<li>Allows a single XHTML document to be turned into a PowerPoint-like slide show</li>
<li>Adding screen and print style sheets allows for multi-medium views of a single document</li>
<li>Highly efficient, but highly browser centric...</li>
</ul>
</li>


<li class="slide">
<h1>Incremental Display</h1>
<ul class="incremental show-first">
<li>Keep hitting/clicking "next" as long as it isn't the control link (&raquo;)</li>
<li>Bullet points are revealed one by one
<ul class="incremental">
<li>All based on class name of <code>inc</code></li>
<li>Lists can be classed to make items appear individually</li>
<li>Individual items can be classed as well to create "animations"; see <a href="http://boxofchocolates.ca/projects/s5-incremental-graphics/" rel="external">Derek Featherstone's example</a></li>
</ul>
</li>
<li>Let's try it again, but without the first bullet point being pre-highlighted...</li>
</ul>
</li>


<li class="slide">
<h1>Incremental Display II</h1>
<ul class="incremental">
<li>Keep hitting/clicking "next" as long as it isn't the control link (&raquo;)</li>
<li>Bullet points are revealed one by one
<ul>
<li>All based on class name of <code>incremental</code></li>
<li>Lists can be classed to make items appear individually</li>
<li>Individual items can be classed as well to create "animations"; see <a href="http://boxofchocolates.ca/projects/s5-incremental-graphics/" rel="external">Derek Featherstone's example</a></li>
</ul>
</li>
<li>Notice how the sub-list was part of the parent bullet point; that was done on purpose</li>
<li>Now to move on to other test slides!</li>
</ul>
</li>


<li class="slide">
<h1>PNG Alpha Tests</h1>
<div style="width: 400px; height: 150px; text-align: center; background: url(ui/i18n/bg-shade.png)">
<p>DIV with PNG background followed by foreground PNG</p>
<img src="ui/i18n/bg-shade.png" alt="" title="A translucent image" />
</div>
<div style="width: 100%; height: 150px; text-align: center; background: url(ui/i18n/bg-shade.png)">
<p>DIV with PNG background followed by foreground PNG</p>
<img src="ui/i18n/bg-shade.png" alt="" title="A translucent image" />
</div>
</li>


<li class="slide">
<h1>S5 Default File Structure</h1>
<p style="text-align: center;">
<img src="pix/s5filemap.png" alt="" title="At a Glance" />
</p>
</li>


<li class="slide">
<h1>S5 Themes</h1>
<p class="imgcon">
<img src="pix/S501.jpg" alt="" title="Default" />
<img src="pix/S502.jpg" alt="" title="I18N" />
<img src="pix/S503.jpg" alt="" title="Blue" />
<img src="pix/S504.jpg" alt="" title="Flower" />
(one way of presenting multiple graphics)
</p>
</li>


<li class="slide">
<h1>Incremental S5 Themes</h1>
<p class="imgcon">
<img src="pix/S501.jpg" alt="" title="Default" class="incremental" />
<img src="pix/S502.jpg" alt="" title="I18N" class="incremental" />
<img src="pix/S503.jpg" alt="" title="Blue" class="incremental" />
<img src="pix/S504.jpg" alt="" title="Flower" class="incremental" />
(one by one!)
</p>
</li>


<li class="slide">
<h1>Incremental Animation</h1>
<ul>
<li>A demonstration of just one of the many ways to accomplish simple animation-like effects <small>(using a diagram from <a href="http://gmpg.org/xfn/and/" rel="external">"XFN and..."</a>)</small></li>
</ul>
<p class="imgcon" id="anim">
<img src="pix/mememe01.png" id="me01" alt="" />
<img src="pix/mememe02.png" alt="" id="me02" class="incremental" />
<img src="pix/mememe03.png" alt="" id="me03" class="incremental" />
<img src="pix/mememe04.png" alt="" id="me04" class="incremental" />
<img src="pix/mememe05.png" alt="" id="me05" class="incremental" />
</p>
</li>


<li class="slide">
<h1>In Summary</h1>
<ul>
<li>With minimal scripting, we have recreated and improved upon a (currently) browser-specific technology, making it cross-browser in the process</li>
<li>The S5 format is OSF 1.0 compatible</li>
<li>S5 is a very flexible and lightweight slide show system available for anyone to use</li>
</ul>
</li>

</ol>

</body>
</html>
